import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView, Alert} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex, Carousel, List, Grid, Icon} from '@ant-design/react-native';
import {outlineGlyphMap} from '@ant-design/icons-react-native/lib/outline';
import {getParkingRentInfo} from '~/api/parking';

export default class parkRentInfo extends Component {
    static navigationOptions = {
        title: '租售车位详情',
    };

    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);
        // 设置当前组件的属性
        this.state = {
            id: this.props.navigation.getParam('params'),
            list: [],
            BuildingName: '',
            ParkingName: '',
            AreaName: '',
            Address: '',
            PriceRent: 0,
            PriceSell: 0,
            AreaBuilt: 0,
            AreaInner: 0,
            AreaLength: 0,
            AreaWidth: 0,
            ContactName: '',
            ContactPhone: '',
            state: 0,
            gzcount: 500,
            sccount: 200,
            checked: false,
            CountFavorities: 500,
            CountView: 200,
            imgarr: [
                {
                    url: 'https://facebook.github.io/react-native/img/tiny_logo.png',
                },
                {
                    url: 'https://facebook.github.io/react-native/img/tiny_logo.png',
                },
            ],
        };
        getParkingRentInfo(this.state.id).then((r) => {
            if (r.code === 0) {
                this.setState({
                    list: r.data,
                    // BuildingName: r.data.BuildingName,
                    // ParkingName: r.data.ParkingName,
                    // Address: r.data.BuildingAddress,
                    // AreaBuilt: r.data.AreaBuilt,
                    // AreaInner: r.data.AreaInner,
                    // ContactName: r.data.ContactName,
                    // ContactPhone: r.data.ContactPhone,
                    // state: r.data.RentType,
                    // PriceRent: r.data.PriceRent,
                    // PriceSell: r.data.PriceSell,
                });
            } else {
                Alert.alert(r.msg);
            }
        });
        console.disableYellowBox = true;
    } //
    render() {
        const outlineData = Object.keys(outlineGlyphMap).map((item) => ({
            icon: <Icon name={item} />,
            text: item,
        }));
        return (
            <View style={{width: '100%', height: '100%'}}>
                <ScrollView style={{flex: 1}}>
                    <Flex direction="column" align="start" style={{backgroundColor: '#FFFFFF'}}>
                        {/*<Image style={{width: '100%', height: 250}} source={require('~/assets/parkinfo/chewei2x.png')} />*/}
                        <Flex
                            justify={'between'}
                            style={{
                                width: '100%',
                                marginTop: 24.5,
                                paddingLeft: 20,
                                paddingRight: 20,
                            }}>
                            <Text
                                numberOfLines={1}
                                style={{
                                    fontSize: 20,
                                    width: '80%',
                                }}>
                                {this.state.BuildingName}
                                <Text style={{color: '#999999'}}>{this.state.list.ParkingName}</Text>
                            </Text>
                            <Text
                                style={{
                                    width: 62,
                                    height: 24,
                                    backgroundColor: '#EC4F46',
                                    color: 'white',
                                    textAlign: 'center',
                                    fontSize: 13,
                                    borderRadius: 5,
                                    paddingTop: 3,
                                }}>
                                {this.state.list.RentType == 0 ? '出租' : '出售'}
                            </Text>
                        </Flex>
                        <Flex direction={'row'} style={{marginTop: 22, marginLeft: 21}}>
                            <Text style={{color: '#999999', fontSize: 13}}>车位价格</Text>
                            <Text
                                style={{
                                    color: '#EC4F46',
                                    marginLeft: 5,
                                    fontSize: 20,
                                }}>
                                {this.state.list.RentType == 0 ? this.state.list.PriceRent + '元/月' : this.state.list.PriceSell + '元'}
                            </Text>
                        </Flex>
                        <View style={styles.textfenge} />
                        <Flex style={{marginTop: 21, marginLeft: 20}}>
                            <Text>地址:</Text>
                            <Text>{this.state.list.CityName}{this.state.list.BuildingAddress}</Text>
                            <Image
                                style={{
                                    width: 10,
                                    height: 11,
                                }}
                                source={require('~/assets/shouye/dizhi_12x.png')}
                            />
                        </Flex>
                        <View style={styles.textfenges} />
                        <Text
                            style={{
                                marginTop: 20,
                                marginLeft: 30,
                                fontSize: 16,
                            }}>
                            车位概况
                        </Text>
                        <Flex direction={'row'} style={{marginLeft: 20.5, marginTop: 14.5}}>
                            <Text style={{fontSize: 14, color: '#999999'}}>建筑面积：</Text>
                            <Text style={{fontSize: 14}}>{this.state.list.AreaBuilt}平方米</Text>
                        </Flex>
                        <Flex direction={'row'} style={{marginLeft: 20.5, marginTop: 14.5}}>
                            <Text style={{fontSize: 14, color: '#999999'}}>使用面积：</Text>
                            <Text style={{fontSize: 14}}>{this.state.list.AreaInner}平方米</Text>
                        </Flex>
                        <View style={styles.textfenges} />
                        <Text
                            style={{
                                marginTop: 20,
                                marginLeft: 30,
                                fontSize: 16,
                            }}>
                            联系方式
                        </Text>
                        <Flex direction={'row'} style={{marginLeft: 20.5, marginTop: 14.5}}>
                            <Text style={{fontSize: 14, color: '#999999'}}>联系人：</Text>
                            <Text style={{fontSize: 14}}>{this.state.list.ContactName}</Text>
                        </Flex>
                        <Flex
                            direction={'row'}
                            style={{
                                marginLeft: 20.5,
                                marginTop: 14.5,
                                marginBottom: 15,
                            }}>
                            <Text style={{fontSize: 14, color: '#999999'}}>电话：</Text>
                            <Text style={{fontSize: 14}}>{this.state.list.ContactPhone}</Text>
                        </Flex>
                        <View style={styles.textfengess} />
                    </Flex>
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    wrapper: {
        backgroundColor: '#fff',
    },
    containerHorizontal: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 150,
    },
    containerVertical: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 150,
    },
    text: {
        color: '#fff',
        fontSize: 36,
    },
    images: {
        width: '100%',
        height: 150,
        marginTop: 10,
    },
    images2: {
        width: '100%',
        height: 50,
        marginTop: 10,
    },
    textfenge: {
        width: '100%',
        backgroundColor: '#F6F6F6',
        height: 2,
        marginTop: 20,
    },
    textfenges: {
        width: '100%',
        backgroundColor: '#F6F6F6',
        height: 10,
        marginTop: 20,
    },
    textfengess: {
        width: '100%',
        backgroundColor: '#F6F6F6',
        height: 35,
    },
});
